import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle{
    id: root
    width: 360; height: 400
    color: "#eeeeee"

    Component{
        id: phoneModel
        ListModel{
            ListElement{
                name: "iPhone 5"
                cost: "4900"
                manufacturer: "Apple"
            }
            ListElement{
                name: "iPhone 3Gs"
                cost: "1000"
                manufacturer: "Apple"
            }
            ListElement{
                name: "iPhone 4"
                cost: "1800"
                manufacturer: "Apple"
            }
            ListElement{
                name: "iPhone 4s"
                cost: "2300"
                manufacturer: "Apple"
            }
            ListElement{
                name: "B199"
                cost: "1590"
                manufacturer: "HuaWei"
            }
            ListElement{
                name: "C8816D"
                cost: "590"
                manufacturer: "HuaWei"
            }
            ListElement{
                name: "GALAXY S4"
                cost: "3099"
                manufacturer: "Samsung"
            }
            ListElement{
                name: "GALAXY S5"
                cost: "4699"
                manufacturer: "Samsung"
            }
            ListElement{
                name: "MI 2s"
                cost: "1999"
                manufacturer: "XiaoMi"
            }
            ListElement{
                name: "MI 2s"
                cost: "1999"
                manufacturer: "XiaoMi"
            }
        }
    }

    Component{
        id: phoneDelegate
        Item{
            id: wrapper
            width: root.width
            height: 30
            ListView.onAdd:{
                console.log("count: ", ListView.view.count);
            }

            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index;
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 120
                }
                Text{
                    text: cost
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }
                Text{
                    text: manufacturer
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }
        }
    }

    ListView{
        id: listView
        anchors.fill: parent
        delegate: phoneDelegate
        model: phoneModel.createObject(listView)
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

        section.property: "manufacturer"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeader
    }
    Component{
        id: sectionHeader
        Rectangle{
            width: root.width
            height: childrenRect.height
            color: "lightsteelblue"
            Text{
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }
}

